<template>
	<view>
		<!-- 发票类型 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="selectTypes flex" style="position: fixed;top: 0;">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="selectTypes flex" style="position: fixed;top: 86rpx;">
				<!-- #endif -->
				<view class="selectTypes-box flex align-center">
					<view :class="{active:current==index}" @click="qiehuans(index,item.id)" class="selectTypes-item"
						v-for="(item,index) in tabs" :key="index">
						{{item.name}}
					</view>
					<view class="shgaixuan flex justify-center align-center" @click="qiehuan">
						<u-icon name="list" color="black" size="40"></u-icon>
					</view>
				</view>
			</view>
			<!-- 筛选下拉 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="selectDown flex justify-center flex-wrap" v-show="open" style="position: fixed;top: 70rpx;">
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="selectDown flex justify-center flex-wrap" v-show="open"
					style="position: fixed;top: 156rpx;">
					<!-- #endif -->
					<view class="selectDown-box">
						<view class="selectDown-box-title">
							时间范围
						</view>
						<view class="selectDown-box-time flex justify-between align-center">
							<view class="selectDown-box-time-l flex justify-center align-center"
								@click="showTimes=true">
								{{startTime}}
							</view>
							至
							<view class="selectDown-box-time-r flex justify-center align-center"
								@click="showTimee=true">
								{{endtime}}
							</view>
						</view>
					</view>
					<view class="selectDown-btn flex justify-between">
						<view class="selectDown-btn-l flex justify-center align-center" @click="qiehuan">
							取消
						</view>
						<view class="selectDown-btn-r flex justify-center align-center" @click="submit">
							确定
						</view>
					</view>
				</view>

				<!-- 可开发票列表 -->
				<view class="fpList flex justify-center flex-wrap" v-if="orderList.length>0">
					<view class="fpList-box">
						<u-checkbox-group shape="circle">
							<view class="fpList-box-item flex justify-center" 
								v-for="(item,index) in orderList" :key="index">
								<view class="fpList-box-item-c flex justify-between align-center">
									<view class="fpList-box-item-c-l flex align-center">
										<view class="fpList-box-item-c-l-s">
											<u-checkbox @change="checkboxChange(item)" v-model="item.checked"
												:name="index"></u-checkbox>
										</view>
										<view class="fpList-box-item-c-l-info" @click.stop="gototx(item.indentNumber,item.indentMoney)">
											<view class="fpList-box-item-c-l-info-t">
												<text v-if="item.indentType=='1'">即时代驾</text>
												<text v-if="item.indentType=='2'">朋友代驾</text>
												<text v-if="item.indentType=='3'">预约代驾</text>
												<span>{{item.createTime}}</span>
											</view>
											<block v-if="item.indentType == 1||item.indentType == 2||item.indentType == 3">
												<view class="fpList-box-item-c-l-info-c" >
													<span>
														<text></text>
													</span>
													{{item.shipAddress}}
												</view>
											</block>
											<view class="fpList-box-item-c-l-info-b">
												<span><text></text></span>
												{{item.deliveryAddress}}
											</view>
											
										</view>
									</view>
									<view class="fpList-box-item-c-r">
										<span>{{item.indentMoney}}</span>元
									</view>
								</view>
							</view>
						</u-checkbox-group>
					</view>
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>
				
				<empty v-if="orderList.length==0" />


				<!-- 底部操作栏 -->
				<view class="select flex justify-center flex-wrap">
					<view class="select-se flex justify-center">
						<view class="select-se-box flex align-center">
							已选<text>{{count}}</text>个记录，共<text>{{price.toFixed(2)}}</text>元
						</view>
					</view>
					<view class="select-box flex justify-center align-center">
						<view class="select-box-c flex justify-between">
							<view class="select-box-c-s">
								<u-checkbox shape="circle" @change="checkboxChanges" v-model="selectAll">本页全选
								</u-checkbox>
							</view>
							<view class="select-box-c-btn flex justify-center align-center" v-if="ids.length==0">
								开发票
							</view>
							<view @click="gotokp()" class="select-box-c-btn flex justify-center align-center" style="background-color: #17a6ff;color:#ffffff;" v-if="ids.length>0">
								开发票
							</view>
						</view>
					</view>
				</view>
				<!-- 遮罩 -->
				<u-mask :show="show"></u-mask>
				<!-- 开始时间 -->
				<u-picker v-model="showTimes" :params="params" mode="time" @confirm="confirms"></u-picker>
				<u-picker v-model="showTimee" :params="params" mode="time" @confirm="confirme"></u-picker>
			</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		data() {
			return {
				count:0,
				price:0,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				selectAll: false,
				orderList: [],
				startTime: '',
				endtime: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showTimes: false,
				showTimee: false,
				show: false,
				open: false,
				current: 0,
				page: 1,
				limit: 10,
				totalPage: 0,
				ids: [],
				tabs: [{
						id: 1,
						name: '即时代驾'
					},
					{
						id: 2,
						name: '朋友代驾'
					},
					{
						id: 3,
						name: '预约代驾'
					}],
			}
		},
		//监听选择变化计算总价
		watch:{
			ids(newData,oldData){
				this.price = 0
				this.orderList.map(item=>{
					if(item.checked==true){
						this.price += item.indentMoney
					}
				})
			},
			deep:true
		},
		onLoad() {
			// this.startTime = new Date().toISOString().slice(0, 10),
			// this.endtime = new Date().toISOString().slice(0, 10),
			this.getOrderList();
		},
		onShow() {
			this.getOrderList();
		},
		onReachBottom: function() {
			if (this.page < this.totalPage) {
				this.page = this.page + 1;
				this.status = 'loading'
				this.getPrice()
				this.getOrderList();
			}else{
				this.status = 'nomore'
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getPrice()
			this.getOrderList();
		},
		methods: {
			// 多个开票
			gotokp(){
				let id = this.ids.join(',')
				let price = this.price.toFixed(2)
				uni.navigateTo({
					url: '/pageA/invoice/kaipiao?indentNumber=' + id+'&price='+price
				})
			},
			//计算单数与价格
			getPrice(){
				this.selectAll = false
				this.orderList.map(item=>{
					item.checked = false
				})
				this.ids = []
				this.count = this.ids.length
				this.price = 0
			},
			//根据时间筛选
			submit(){
				this.show = false
				this.open = false
				this.page = 1
				this.getOrderList();
			},
			// 去开票
			gototx(id,price) {
				uni.navigateTo({
					url: '/pageA/invoice/kaipiao?indentNumber=' + id+'&price='+price
				})
			},
			//切换订单类型
			qiehuans(index, id) {
				this.current = index
				this.page = 1
				this.orderList = []
				this.getPrice()
				this.startTime = '开始时间'
				this.endtimec = '截止时间'
				this.getOrderList()
			},
			//订单数据
			getOrderList() {
				let data = {
					page: this.page,
					limit: this.limit,
					indentType: parseInt(this.current) + 1,
					startTime: this.startTime=='开始时间'?'':this.startTime,
					endTime: this.endtime=='截止时间'?'':this.endtime,
				}
				this.$Request.getT("/app/invoice/getIndentList", data).then(res => {
					if (res.code == 0) {
						this.totalPage = res.data.pages
						let data = res.data.records
						data.map(item => {
							item.checked = false
						})
						if (this.page == 1) {
							this.orderList = data
						} else {
							if (data.length > 0) {
								this.orderList = this.orderList.concat(data)
							}
						}

					}
				});
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				if (this.ids.indexOf(e.indentNumber) == -1) { //如果没有选中则把goodsid增加到数组中
					this.ids.push(e.indentNumber)
				} else { //如果找到了则把goodsid删除
					this.ids.splice(this.ids.indexOf(e.indentNumber), 1)
				}
				if (this.ids.length == this.orderList.length) { //判断是否全部选中
					this.selectAll = true
				} else {
					this.selectAll = false
				}
				this.count = this.ids.length
			},
			//全选
			checkboxChanges(e) {
				this.ids = []
				if (this.selectAll == false) { //全选（把总复选框选中并把id赋给数组）
					this.orderList.map(item => {
						item.checked = true
						this.ids.push(item.indentNumber)
					})
				} else { //全不选
					this.orderList.map(item => {
						item.checked = false
					})
				}
				this.count = this.ids.length
				this.price = 0
				this.orderList.map(item=>{
					if(item.checked==true){
						this.price +=item.indentMoney
					}
				})
			},
			confirms(e) {
				this.startTime = e.year + '-' + e.month + '-' + e.day
			},
			confirme(e) {
				this.endtime = e.year + '-' + e.month + '-' + e.day
			},
			//切换
			qiehuan() {
				//初始化时间
				this.startTime = '开始时间'
				this.endtime = '截止时间'
				this.show = !this.show
				this.open = !this.open
			},
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: rgba(3, 159, 255, 0.1) !important;
		color: #068bff;
	}

	.selectDown {
		width: 100%;
		// height: 300rpx;
		background-color: #ffffff;
		z-index: 99999;
		border-radius: 0 0 20rpx 20rpx;

		.selectDown-box {
			width: 686rpx;
			margin-top: 20rpx;

			.selectDown-box-time {
				margin-top: 20rpx;

				.selectDown-box-time-l {
					width: 40%;
					height: 70rpx;
					background-color: #f2f2f2;
					border-radius: 16rpx;
				}

				.selectDown-box-time-r {
					width: 40%;
					height: 70rpx;
					background-color: #f2f2f2;
					border-radius: 16rpx;
				}
			}
		}

		.selectDown-btn {
			width: 100%;
			height: 80rpx;
			margin-top: 30rpx;

			.selectDown-btn-l {
				width: 50%;
				height: 100%;
				background-color: #f2f2f2;
				border-radius: 0 0 0 20rpx;
			}

			.selectDown-btn-r {
				width: 50%;
				background-color: #17a6ff;
				color: #ffffff;
				height: 100%;
				border-radius: 0 0 20rpx 0;
			}
		}
	}

	.selectTypes {
		width: 100%;
		height: 70rpx;
		background-color: #ffffff;
		position: relative;
		z-index: 99999;

		.shgaixuan {
			position: absolute;
			width: 60rpx;
			height: 100%;
			right: 31rpx;
			background-color: #ffffff;
			z-index: 9999;
		}

		.selectTypes-box {
			width: 626rpx;
			height: 100%;
			// background-color: red;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			margin-left: 32rpx;

			.selectTypes-item {
				background-color: #f2f2f2;
				padding: 10rpx 20rpx 10rpx 20rpx;
				border-radius: 12rpx;
				margin-right: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.fpList {
		width: 100%;
		height: auto;
		margin-top: 90rpx;
		margin-bottom: 190rpx;

		.fpList-box {
			width: 686rpx;
			height: 100%;
			.fpList-box-item {
				width: 686rpx;
				// height: 200rpx;
				padding: 20rpx 0;
				border-radius: 26rpx;
				background-color: #ffffff;
				margin-bottom: 20rpx;
			}

			.fpList-box-item-c {
				width: 646rpx;
				height: 100%;

				.fpList-box-item-c-l-info-t {
					font-size: 30rpx;
					font-weight: bold;

					span {
						margin-left: 20rpx;
						color: #cccccc;
						font-size: 22rpx;
						font-weight: 300;
					}
				}

				.fpList-box-item-c-l-info-c {
					width: 460rpx;
					margin-top: 10rpx;
					color: rgb(126, 126, 126);
					span {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						background-color: #17a6ff;
						border-radius: 50%;
						position: relative;
						margin-right: 20rpx;

						text {
							display: inline-block;
							width: 10rpx;
							height: 10rpx;
							background-color: #ffffff;
							border-radius: 50%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}

				.fpList-box-item-c-l-info-b {
					width: 460rpx;
					margin-top: 10rpx;
					color: rgb(126, 126, 126);

					span {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						background-color: black;
						border-radius: 50%;
						position: relative;
						margin-right: 20rpx;

						text {
							display: inline-block;
							width: 10rpx;
							height: 10rpx;
							background-color: #ffffff;
							border-radius: 50%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}

				.fpList-box-item-c-r {
					margin-top: 94rpx;

					span {
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	.select {
		width: 100%;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		z-index: 1;
		.select-se {
			width: 100%;
			height: 50rpx;
			background-color: rgb(211, 233, 252);

			.select-se-box {
				width: 686rpx;
				height: 100%;
				font-size: 24rpx;

				text {
					margin-left: 10rpx;
					margin-right: 10rpx;
					color: rgb(118, 167, 219);
				}
			}
		}

		.select-box {
			width: 686rpx;
			height: 100%;

			.select-box-c {
				width: 646rpx;
				height: 100%;

				.select-box-c-s {
					height: 100%;
					margin-top: 20rpx;
				}

				.select-box-c-btn {
					width: 240rpx;
					height: 80rpx;
					border-radius: 60rpx;
					background-color: rgb(219, 219, 219);
					color: #ffffff;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
